<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('managementCost.buActualCost.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('managementCost.buActualCost.name')}}</div>
              <el-autocomplete style="width: 100%" clearable v-model="listQuery.name" :fetch-suggestions="getUserList" :placeholder="$t('managementCost.buActualCost.enterEmployeeNo')" @select="setUser"></el-autocomplete>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select filterable clearable v-model="listQuery.bu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="(item, index) in buList" :key="index" :label="item.bu" :value="item.bu"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('buBusiness.year')}}</div>
              <dict-select v-model="listQuery.year" code="year" clearable></dict-select>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 33px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.query')}}</div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.resetCondition')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="yt-data-list">
      <div class="yt-list-title">
        <span>{{$t('managementCost.buActualCost.actualCost')}}</span>
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <div class="yt-btn yt-btn-ys" type="primary" @click="handleAdd">{{$t('button.new')}}</div>
          <div class="yt-btn yt-ml8" type="danger" @click="handleDelete">{{$t('button.delete')}}</div>
          <div class="yt-btn yt-ml8" type="danger" @click="handleEdit">{{$t('button.preserve')}}</div>
        </div>
        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border style="width: 100%;" class="yt-table yt-temporary" @selection-change="handleSelectionChange" v-loading.body="listLoading" max-height="600">
          <el-table-column align="center" label="Sum">
            <el-table-column type="selection" align="center" class-name="pd" prop="id" width="50"/>
            <el-table-column type="index" align="center" :label="$t('managementCost.buActualCost.serialNum')"/>
          </el-table-column>
          <el-table-column align="center">
            <el-table-column align="center" :label="$t('buBusiness.year')" prop="year">
              <template slot-scope="scope">
                <dict-select v-model="scope.row.year" code="year" clearable></dict-select>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" :label="subtotal.bu">
            <el-table-column align="center" label="Account" prop="name" class-name="pd">
              <template slot-scope="scope">
                <el-select filterable clearable v-model="scope.row.bu" @change="((val)=>{setBu(val, scope.row)})" :placeholder="$t('placeholder.choose')">
                  <el-option v-for="(item, index) in buList" :key="index" :label="item.bu" :value="item.bu"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <el-table-column align="center" label="Account Type" prop="buType" class-name="bg"/>
          </el-table-column>
          <el-table-column align="center">
            <el-table-column align="center" :label="$t('managementCost.buActualCost.fromBG')" prop="bg" class-name="bg"/>
          </el-table-column>
          <el-table-column align="center">
            <el-table-column align="center" :label="$t('managementCost.buActualCost.country')" prop="country" class-name="bg" width="50"/>
          </el-table-column>
          <el-table-column align="center" :label="subtotal.amortization">
            <el-table-column align="center" :label="$t('managementCost.buActualCost.amortization')" width="130" prop="amortization">
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <el-input style="display: none" type="number" size="small" v-model="scope.row.amortization" :placeholder="$t('placeholder.content')"></el-input>
                  <div v-format="'#,##0'" class="box" :placeholder="$t('placeholder.content')">{{scope.row.amortization}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" :label="subtotal.manageHumanCost">
            <el-table-column align="center" :label="$t('managementCost.buActualCost.manageHumanCost')" width="130" prop="manageHumanCost">
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <el-input style="display: none" type="number" size="small" v-model="scope.row.manageHumanCost" :placeholder="$t('placeholder.content')"></el-input>
                  <div v-format="'#,##0'" class="box" :placeholder="$t('placeholder.content')">{{scope.row.manageHumanCost}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" :label="subtotal.projectHumanCost">
            <el-table-column align="center" :label="$t('managementCost.buActualCost.projectHumanCost')" width="130" prop="projectHumanCost">
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <el-input style="display: none" type="number" size="small" v-model="scope.row.projectHumanCost" :placeholder="$t('placeholder.content')"></el-input>
                  <div v-format="'#,##0'" class="box" :placeholder="$t('placeholder.content')">{{scope.row.projectHumanCost}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" :label="subtotal.abilityProjectCost">
            <el-table-column align="center" :label="$t('managementCost.buActualCost.abilityProjectCost')" width="130" prop="abilityProjectCost">
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <el-input style="display: none" type="number" size="small" v-model="scope.row.abilityProjectCost" :placeholder="$t('placeholder.content')"></el-input>
                  <div v-format="'#,##0'" class="box" :placeholder="$t('placeholder.content')">{{scope.row.abilityProjectCost}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" :label="subtotal.manageCost">
            <el-table-column align="center" label="管理成本" width="130" prop="manageCost">
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <el-input style="display: none" type="number" size="small" v-model="scope.row.manageCost" :placeholder="$t('placeholder.content')"></el-input>
                  <div v-format="'#,##0'" class="box" :placeholder="$t('placeholder.content')">{{scope.row.manageCost}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <!--manageCost-->
          <el-table-column align="center">
            <el-table-column align="center" :label="$t('managementCost.buActualCost.updateName')" prop="updateName"/>
          </el-table-column>
          <el-table-column align="center">
            <el-table-column align="center" :label="$t('managementCost.buActualCost.updateTime')" prop="updateTime" :formatter="formatter.formatTimes"/>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[10, 20, 30, 50, 100, 200]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--新增弹窗-->
    <el-dialog :title="$t('button.new')" :visible.sync="dialogVisible" :before-close="dialogVisibleClose">
      <el-form ref="form" :model="Info" label-width="100px">
        <el-form-item :label="$t('buBusiness.year')" >
          <dict-select v-model="Info.year" code="year" clearable></dict-select>
        </el-form-item>
        <el-form-item label="Category">
          <el-select filterable clearable v-model="Info.bu" @change="((val)=>{setBu(val, Info)})" :placeholder="$t('placeholder.choose')">
            <el-option v-for="(item, index) in buList" :key="index" :label="item.bu" :value="item.bu"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('managementCost.buActualCost.amortization')">
          <div v-check-submit tabindex="0">
            <el-input v-model="Info.amortization" :placeholder="$t('placeholder.content')"></el-input>
            <div class="check_div box1" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ Info.amortization }}</div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('managementCost.buActualCost.manageHumanCost')">
          <div v-check-submit tabindex="0">
            <el-input v-model="Info.manageHumanCost" :placeholder="$t('placeholder.content')"></el-input>
            <div class="check_div box1" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ Info.manageHumanCost }}</div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('managementCost.buActualCost.projectHumanCost')">
          <div v-check-submit tabindex="0">
            <el-input v-model="Info.projectHumanCost" :placeholder="$t('placeholder.content')"></el-input>
            <div class="check_div box1" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ Info.projectHumanCost }}</div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('managementCost.buActualCost.abilityProjectCost')">
          <div v-check-submit tabindex="0">
            <el-input v-model="Info.abilityProjectCost" :placeholder="$t('placeholder.content')"></el-input>
            <div class="check_div box1" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ Info.abilityProjectCost }}</div>
          </div>
        </el-form-item>
        <!--manageCost-->
        <el-form-item label="管理成本">
          <div v-check-submit tabindex="0">
            <el-input v-model="Info.manageCost" :placeholder="$t('placeholder.content')"></el-input>
            <div class="check_div box1" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ Info.manageCost }}</div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="yt-btn yt-btn-ys" type="primary" @click="insertData">{{$t('button.preserve')}}</div>
        <div class="yt-btn yt-ml8" type="danger" @click="dialogVisibleClose">{{$t('button.cancel')}}</div>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import { selectBuAndBg } from '@/api/bu/index';
  import dictSelect from '@/components/Dict/dictValueSelect';
  import { getUserInfoByName } from '@/api/dict/dictValue/index';
  import { getList, deleteData, insertData, updateData } from '@/api/pmoReport/managementCost';
  import formatter from '@/utils/formatter';

  export default {
    name: 'buActualCost',
    data() {
      return {
        subtotal: {},
        formatter,
        listMapAll: this.$store.getters.allMapDic,
        listQuery: {
          page: 1,
          limit: 10,
          createBy: '',
          year: '',
          bu: ''
        },
        total: 0,
        list: [],
        selectionList: [],
        buList: [],
        dialogVisible: false,
        Info: {},
        listLoading: true
      };
    },
    components: { dictSelect },
    created() {
      this.getQuery();
      this.getList();
      this.getBu()
    },
    methods: {
      getQuery() {
        const buActualCostListQuery = window.sessionStorage.getItem('buActualCostListQuery');
        if (buActualCostListQuery) {
          this.listQuery = JSON.parse(buActualCostListQuery);
        }
      },
      insertData() {
        // 新增保存
        insertData([this.Info]).then(res => {
          this.$notify({
            title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
            message: res.status === 200 ? this.$t('tips.success') : res.message,
            type: res.status === 200 ? 'success' : 'warning'
          });
          if (res.status === 200) {
            this.dialogVisibleClose()
            this.getList();
          }
        });
      },
      dialogVisibleClose() {
        // 关闭弹窗
        this.dialogVisible = false
        this.Info = {}
      },
      setBu(val, row) {
        for (let i = 0; i < this.buList.length; i++) {
          if (this.buList[i].bu === val) {
            row.buId = this.buList[i].id;
            row.bu = this.buList[i].bu;
            break;
          }
        }
      },
      getList() {
        this.listLoading = true;
        getList(this.listQuery).then(response => {
          if (response.data.rows && response.data.rows.length > 0) {
            this.list = response.data.rows;
            this.list.forEach(v => {
              v.country = this.listMapAll.country[v.country];
            });

            this.subtotal = response.data.subtotal;
            Object.keys(this.subtotal).forEach(key => {
              this.subtotal[key] = String(this.subtotal[key]).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
            })
          } else {
            this.list = [];
            this.subtotal = {};
          }
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handleAdd() {
        // 新增
        this.Info = {
          bu: '',
          amortization: '',
          manageHumanCost: '',
          projectHumanCost: '',
          abilityProjectCost: '',
          manageCost: ''
        }
        this.dialogVisible = true
      },
      handleDelete() {
        // 删除
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('tips.fail'),
            message: this.$t('tips.pleaseChoose'),
            type: 'warning'
          });
          return;
        }
        deleteData(this.selectionList).then(res => {
          this.$notify({
            title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
            message: res.status === 200 ? this.$t('tips.success') : res.message,
            type: res.status === 200 ? 'success' : 'warning'
          });
          this.getList();
        });
      }, handleEdit() {
        // 编辑
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('tips.fail'),
            message: this.$t('tips.pleaseChoose'),
            type: 'warning'
          });
          return;
        }
        this.listLoading = true;
        updateData(this.selectionList).then(res => {
          this.listLoading = false;
          this.$notify({
            title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
            message: res.status === 200 ? this.$t('tips.success') : res.message,
            type: res.status === 200 ? 'success' : 'warning'
          });
          this.getList();
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = { page: 1, limit: 10, createBy: '', bu: '', year: '' };
        this.getList();
      },
      getBu() {
        selectBuAndBg().then(res => {
          this.buList = res.data;
        });
      },
      getUserList(queryString, cb) {
        // 获取填写人信息
        getUserInfoByName({ username: queryString }).then(res => {
          this.userList = res.data.rows;
          for (let i = 0; i < this.userList.length; i++) {
            this.userList[i].value = this.userList[i].ename;
          }
          cb(this.userList);
        });
      },
      setUser(item) {
        this.listQuery.createBy = item.id;
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('buActualCostListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped>
  .check_div {
    height: 36px;
    width: 100%;
    line-height: 36px;
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    border: 1px solid rgb(220, 223, 230);
    box-sizing: border-box;
    outline: 0px;
    padding: 0px 30px !important;
    display: none;
  }
  .box{
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    color: #333;
    cursor:text;
    padding:0 15px;
  }
  .box:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 14px;
  }
  .box1{
    height: 36px;
    line-height: 36px;
    text-align: left;
    border-radius: 4px;
    color: #333;
    cursor:text;
    padding:0 15px !important;
  }
  .box1:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 12px;
  }
</style>
